<template>
  <div :id="demo_class" :style="{height:style_height.height,width:style_height.width}"></div>
</template>

<script>
import {
  onMounted,
  reactive,
  inject,
  onUpdated
} from "vue"
import {get_Equ_Utilization} from "@/api/cockpit/data"
import {handle_time} from "@/utils/handle_key";
import {message} from "ant-design-vue";
import {option_line_device, option_line_test} from "@/utils/echarts_option/excarts_line";
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  name: "echarts_line",
  props: {
    demo_class: ""
  },
  setup(props, context) {
    const echarts = inject("echarts");//引入
    const style_height = reactive({
      height: "",
      width: ""
    })
    const get_data_list = async () => {
      const {height, width} = get_style_dom(props.demo_class)
      style_height.height = height;
      style_height.width = width;
      const res = await get_Equ_Utilization()
      if (res.code === 1) {
        let result = res.data;
        for (let i = 0; i < result.length; i++) {
          result[i].createTime = handle_time("YYYY-mm-dd", new Date(result[i].createTime))
          console.log(result[i].createTime)
        }
        let x_data = await handle_data(result, "createTime")
        let y_data = await handle_data(result, "utRate")
        await init_charts(x_data, y_data)
        return
      }
      message.warning("数据异常,请联系开发人员")
    }

    const handle_data = (data, field) => {
      let data_item = []
      for (let i = 0; i < data.length; i++) {
        data_item.push(data[i][field])
      }
      return data_item;
    }

    const init_charts = (x_data = [0], y_data = [0]) => {
      // console.log("echarts_line", document.getElementById("echarts_line"))
      let myChart = echarts.init(document.getElementById(props.demo_class));
      try {
        option_line_device.series[0].data = y_data;
        option_line_device.xAxis.data = x_data;
      } catch (e) {

      }
      // 绘制图表
      myChart.setOption(option_line_device);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }


    //初始化
    onMounted(() => {

    })

    onUpdated(() => {
      console.log('updated')

    })

    const init = () => {
      // console.log(props.demo_class)
      document.getElementById(props.demo_class).removeAttribute('_echarts_instance_')
      console.log("--------------------------------------------------------------------------")
      get_data_list()
    }

    return {
      // get_data_list
      style_height,
      init

    }
  },
  created() {

  }
}
</script>

<style scoped lang="scss">
#echarts_line {
  width: 100%;
}
</style>
